<template>
  <div class="patient-overview">
    <div class="time-selector">
      <el-radio-group v-model="selectedTime">
        <el-radio label="24h">24小时</el-radio>
        <el-radio label="48h">48小时</el-radio>
        <el-radio label="72h">72小时</el-radio>
      </el-radio-group>
    </div>
    <div class="overview-content">
      <!-- 患者治疗时间线 -->
      <div class="timeline-container">
        <el-steps :active="activeStep" finish-status="success" align-center :space="150">
          <el-step title="入科" :description="formatTime(admissionTime)"></el-step>
          <el-step title="抢救" :description="formatTime(rescueTime)"></el-step>
          <el-step title="血透" :description="formatTime(dialysisTime)"></el-step>
          <el-step title="ECMO治疗" :description="formatTime(ecmoTime)"></el-step>
          <el-step title="病危" :description="formatTime(criticalTime)"></el-step>
          <el-step title="压疮" :description="formatTime(pressureUlcerTime)"></el-step>
          <el-step title="出科" :description="formatTime(dischargeTime)"></el-step>
        </el-steps>
      </div>

      <!-- 患者实时数据 -->
      <div class="realtime-data">
        <div class="data-left">
          <!-- 生命体征 -->
          <VitalSignsMonitor title="生命体征" :data24h="vitalSignsData" @add="handleAddVitalSigns" />

          <!-- 呼吸支持 -->
          <div class="monitor-section">
            <div class="section-header">
              <h4>呼吸支持</h4>
              <el-button type="primary" size="small">添加</el-button>
            </div>
            <div class="chart-container">
              <!-- ECharts 折线图容器 -->
              <div id="respiratory-chart" style="width:100%;height:200px;"></div>
            </div>
          </div>

          <!-- 出入量平衡 -->
          <div class="monitor-section">
            <div class="section-header">
              <h4>出入量平衡</h4>
              <el-button type="primary" size="small">添加</el-button>
            </div>
            <div class="chart-container">
              <!-- ECharts 折线图容器 -->
              <div id="intake-output-chart" style="width:100%;height:200px;"></div>
            </div>
          </div>
        </div>

        <div class="data-right">
          <div class="real-time-values">
            <h4>实时值数据</h4>
            <div class="value-grid">
              <div class="value-item">
                <span class="value-label">心率</span>
                <span class="value-number">78</span>
                <span class="value-unit">次/分</span>
              </div>
              <div class="value-item">
                <span class="value-label">血压</span>
                <span class="value-number">120/80</span>
                <span class="value-unit">mmHg</span>
              </div>
              <div class="value-item">
                <span class="value-label">血氧</span>
                <span class="value-number">98</span>
                <span class="value-unit">%</span>
              </div>
              <div class="value-item">
                <span class="value-label">体温</span>
                <span class="value-number">36.5</span>
                <span class="value-unit">°C</span>
              </div>
              <div class="value-item">
                <span class="value-label">呼吸</span>
                <span class="value-number">16</span>
                <span class="value-unit">次/分</span>
              </div>
              <div class="value-item">
                <span class="value-label">CVP</span>
                <span class="value-number">8</span>
                <span class="value-unit">cmH₂O</span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VitalSignsMonitor from './monitor/VitalSignsMonitor.vue'

const generateHourlyData = (day: string) => {
  // 确保从0点开始，每小时一个数据点
  const startDate = new Date(day + 'T00:00:00')
  return Array.from({ length: 24 }, (_, hour) => {
    const date = new Date(startDate)
    date.setHours(hour)
    return {
      time: `${day} ${String(hour).padStart(2, '0')}:00`,
      heartRate: Math.floor(Math.random() * 30) + 60,
      respiration: Math.floor(Math.random() * 10) + 12,
      temperature: parseFloat((36 + Math.random() * 2).toFixed(1)),
      bloodPressure: Math.floor(Math.random() * 40) + 100,
      bloodPressure2: Math.floor(Math.random() * 30) + 60,
      pulse: Math.floor(Math.random() * 30) + 60,
      map: Math.floor(Math.random() * 30) + 70
    }
  })
}

const days = ['2025-05-13', '2025-05-14', '2025-05-15']
const allData = days.flatMap(day => generateHourlyData(day))

const vitalSignsData = ref({
  time: allData.map(d => d.time),
  heartRate: allData.map(d => d.heartRate),
  respiration: allData.map(d => d.respiration),
  temperature: allData.map(d => d.temperature),
  bloodPressure: allData.map(d => d.bloodPressure),
  bloodPressure2: allData.map(d => d.bloodPressure2),
  pulse: allData.map(d => d.pulse),
  map: allData.map(d => d.map)
})

const handleAddVitalSigns = () => {
  console.log('添加生命体征数据')
}

const selectedTime = ref('24h')
const activeStep = ref(3) // 当前激活的步骤

// 模拟时间数据
const admissionTime = ref('2023-05-10 08:30')
const rescueTime = ref('2023-05-11 14:20')
const dialysisTime = ref('2023-05-12 09:15')
const ecmoTime = ref('2023-05-13 16:45')
const criticalTime = ref('2023-05-14 10:00')
const pressureUlcerTime = ref('2023-05-15 11:30')
const dischargeTime = ref('2023-05-16 09:00')

// 格式化时间显示（精确到分钟）
const formatTime = (time: string) => {
  const [date, timePart] = time.split(' ')
  const [hours, minutes] = timePart.split(':')
  return `${date} ${hours}:${minutes}`
}
</script>

<style scoped>
.patient-overview {
  padding: 0 10px;
}

.time-selector {
  margin: 15px 0;
}

.time-selector .el-radio-group {
  width: 100%;
}

.time-selector .el-radio {
  margin-right: 10px;
  font-size: 24px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #eee;
  padding: 0 8px;
}

.time-selector .el-radio.is-checked {
  border: 1px solid var(--bg-active);
}

.time-selector .el-radio__label {
  padding-left: 12px;
  font-size: 20px;
}

.time-selector .el-radio__inner {
  border-radius: 0;
  border: 1px solid #4c4d4f;
}

.time-selector .el-radio__input.is-checked .el-radio__inner {
  border-color: #409eff;
  background: #409eff;
}

.timeline-container {
  padding-top: 35px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  width: 70%;
}

/* 实时数据样式 */
.realtime-data {
  display: flex;
  margin: 20px 0;
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  gap: 20px;
}

.data-left {
  flex: 5;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.data-right {
  flex: 2;
}

.monitor-section {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.chart-container {
  height: 200px;
  background: #f9f9f9;
  border-radius: 4px;
}

.real-time-values h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
}

.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.value-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: #f5f7fa;
  border-radius: 4px;
}

.value-label {
  font-size: 14px;
  color: #666;
}

.value-number {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.value-unit {
  font-size: 12px;
  color: #999;
}

:deep(.el-step__title) {
  font-size: 14px;
  font-weight: 300;
  line-height: 16px;
  background: rgb(44, 102, 226);
  color: #fff;
  border-radius: 10px;
  padding: 4px;
  margin: -45px 30px 0 30px;
}

:deep(.el-step__title.is-process) {
  background: rgb(226, 44, 44);
}

:deep(.el-step__icon.is-text) {
  border: 1px solid;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  font-size: 10px;
}

:deep(.el-step__head.is-process),
:deep(.el-step__description.is-process) {
  border-color: rgb(226, 44, 44);
  color: rgb(255, 1, 1);
}

:deep(.el-step__description) {
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  margin-top: 20px;
  padding-right: 10%;
  color: #4c4d4f;
}

:deep(.el-step__icon .is-text) {
  color: red;
}

.overview-content {
  margin-top: 10px;
}
</style>
